/**
 * @Author: wu.hongmei
 * @Date: 2018-09-07
 */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Card, Select, Radio, Tabs } from 'antd';
import { Pie, Bar } from '../../../components/Charts';
import styles from './LogAnalysis.less';

const { Option } = Select;
const { TabPane } = Tabs;

@connect(({ chart, home }) => ({
  chart,
  loading: false,
  homeData: home
}))
export default class LogAnalysis extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentUserType: 'all',
      currentTabKey: '',
      currentTime: 'month'
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'chart/fetch'
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'chart/clear'
    });
  }

  onChangeUserType = e => {
    this.setState({
      currentUserType: e.target.value
    });
  };

  render() {
    const { loading, chart } = this.props;
    const { salesTypeData, salesData } = chart;
    const { currentUserType } = this.state;
    return (
      <div className={styles.root}>
        <div className={styles.header}>
          <div className={styles.title}>日志分析</div>
          <div className={styles.search}>
            <div className={styles.searchContent}>
              <label>应用名称：</label>
              <Select
                defaultValue="lucy"
                style={{ width: 240 }}
                onChange={this.onChange}
              >
                <Option value="jack">选择一</Option>
                <Option value="lucy">选择二</Option>
                <Option value="Yiminghe">选择三</Option>
              </Select>
            </div>
            <Button type="primary">导出分析报告</Button>
          </div>
        </div>
        <div className={styles.content}>
          <Row gutter={24}>
            <Col xl={24} xs={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
              >
                <div className={styles.salesCard}>
                  <Tabs size="large" tabBarStyle={{ marginBottom: 24 }}>
                    <TabPane tab="访问量" key="sales">
                      <div className={styles.salesBar}>
                        <Bar height={295} title="访问量趋势" data={salesData} />
                      </div>
                    </TabPane>
                    <TabPane tab="日活量" key="views">
                      <div className={styles.salesBar}>
                        <Bar height={292} title="日活量趋势" data={salesData} />
                      </div>
                    </TabPane>
                  </Tabs>
                </div>
              </Card>
            </Col>
            <Col xl={12} lg={12} md={12} sm={24} xs={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                title="用户分类占比"
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
                extra={
                  <div className={styles.salesCardExtra}>
                    <div className={styles.salesTypeRadio}>
                      <Radio.Group
                        value={currentUserType}
                        onChange={this.onChangeUserType}
                      >
                        <Radio.Button value="all">全部用户</Radio.Button>
                        <Radio.Button value="part">活跃用户</Radio.Button>
                      </Radio.Group>
                    </div>
                  </div>
                }
              >
                <h4 style={{ marginTop: 8, marginBottom: 32 }}>图标标题</h4>
                <Pie
                  hasLegend
                  subTitle="用户使用日均总时长"
                  //  total={salesTypeData}
                  data={salesTypeData}
                  height={248}
                  lineWidth={4}
                />
              </Card>
            </Col>
            <Col xl={12} lg={12} md={12} sm={24} xs={24}>
              <Card
                loading={loading}
                className={styles.salesCard}
                bordered={false}
                title="平均使用时长"
                bodyStyle={{ padding: 24 }}
                style={{ marginTop: 24, minHeight: 509 }}
              >
                <h4 style={{ marginTop: 8, marginBottom: 32 }}>图标标题</h4>
                <Pie
                  hasLegend
                  subTitle="用户量"
                  // total={salesTypeData}
                  data={salesTypeData}
                  height={248}
                  lineWidth={4}
                />
              </Card>
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
